<template>
  <div class="innerBox" @scroll="checkScroll">
    <!-- 创建论坛 -->
    <creatForum v-if="!pueryForm.userId" @getList="getForumList"></creatForum>
    <!-- 创建论坛 -->
    <div v-if="isPicture" class="scollBox">
      <div v-for="(item,index) in porumsList" :key="index" class="itemBox">
        <!-- 用户信息 -->
        <div class="top" @click="goPersonalHomePage(item.sysUser.userId)">
          <div class="left">
            <!-- 头像 -->
            <div>
              <el-avatar :src="item.sysUser.avatar" size="large"></el-avatar>
            </div>
            <!-- 头像 -->
            <!-- 用户名 -->
            <div>
              <div>{{ item.sysUser.nickName }}</div>
              <div>{{ item.createTime }}</div>
            </div>
            <!-- 用户名 -->
          </div>
          <span class="right"></span>
        </div>
        <!-- 用户信息 -->
        <!-- 文字消息 -->
        <div class="centent">
          <div class="innerCentent">
            <div class="text" v-html="setArray(item.textDocument)"></div>
            <div class="cententImg">
              <el-image
                v-for="innerItem in item.fileList"
                :key="innerItem"
                :preview-src-list="item.fileList"
                :src="innerItem"
                fit="cover"
              >
              </el-image>
            </div>
            <!-- 控件 -->
            <div class="btn">


              <div></div>
              <div>
                <img
                  alt=""
                  src="@/assets/images/评论.png"
                  @click="commentBtn(item)"
                /><span>
                  {{ item.commentCount ? item.commentCount : "评论" }}</span
              >
              </div>
              <div>
                <img
                  v-if="!item.isUpvote"
                  alt=""
                  src="@/assets/images/点赞.png"
                  @click="upvote(item, 'add')"
                />
                <img
                  v-else
                  alt=""
                  src="@/assets/images/已点赞.png"
                  @click="upvote(item, 'delete')"
                /><span>
                  {{ item.upvoteCount ? item.upvoteCount : "点赞" }}</span
              >
              </div>
            </div>
            <!-- 控件 -->
          </div>
        </div>

        <!-- 文字消息 -->

        <div>

          <comment :obj="item.obj"></comment>
        </div>
      </div>

      <div v-if="absence" class="loadMore">到底了</div>
      <div v-else ref="loadMoreMobile" class="loadMore">加载更多</div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import creatForum from "./mobileEndComponents/createForum.vue";
import {setForumsList, addLike, deletaLike} from "@/api/forum";
import {getHomePageMyUpVoteComment} from "@/api/homePgae";
import comment from "./mobileEndComponents/comment.vue";
import userInfo from "@/views/system/user/profile/userInfo.vue";

export default {
  components: {comment, creatForum}

  ,
  data() {
    return {
      pueryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      porumsList: [],
      isPicture: true,
      obj: {
        dialogVisible: false,
        ids: 0,
      },
      total: 0,
      jieliu: true,//节流
      isCreat:true
    };
  },
  mounted() {
    console.log('我是mounted')
    if (this.$route.query.type == 'vote') {
      this.getUpvoteList()
      console.log('查询本用户的')
    } else {
      this.getForumList();
      console.log('查询全部')

    }

  },
  watch: {
    $route(to, from) {
      console.log('来自', from)
      this.jieliu = false
      this.porumsList = []
      if (to.query.type == 'vote') {
        this.getUpvoteList()
        console.log('查询本用户的')
      } else {
        this.pueryForm.pageNum = 1
        this.getForumList(1);
        console.log('查询全部')

      }
    }
  }
  ,
  created() {
    console.log(this.$route, 'userId')
    if (this.$route.query.userId) {
      this.pueryForm.userId = this.$route.query.userId
    }

  },
  computed: {
    userInfo() {
      return userInfo
    },
    ...mapGetters(["userId"]),
    absence: function () {
      return this.porumsList.length >= this.total;
    },
  },
  methods: {
    checkScroll() {


      if (this.jieliu) {

        //容器高度
        const scrollContainer =
          document.getElementsByClassName("appInner")[0].offsetHeight;

        //距离底部的高度
        if (!this.$refs.loadMoreMobile) return
        const bottom = this.$refs.loadMoreMobile.getBoundingClientRect().bottom;
        if (bottom - 5 <= scrollContainer) {

          if (this.absence) {
            this.$message({
              message: "到底了",
              type: "success",
            });
          } else {
            this.jieliu = false


            console.log("到底了");
            this.pueryForm.pageNum++;
            this.getForumList()
          }

        }
      }
    },
    //获取论坛列表
    getForumList(type = 2) {
      this.pueryForm.userId = null

      if (type == 1) {
        setForumsList(this.pueryForm).then((res) => {
          if (res.code === 200) {
            console.log(1)
            res.rows.map((ele) => {
              let arr = [];
              if (ele.fileAddress1) {
                arr.push(ele.fileAddress1);
              }
              if (ele.fileAddress2) {
                arr.push(ele.fileAddress2);
              }
              if (ele.fileAddress3) {
                arr.push(ele.fileAddress3);
              }
              if (ele.fileAddress4) {
                arr.push(ele.fileAddress4);
              }
              if (ele.fileAddress5) {
                arr.push(ele.fileAddress5);
              }
              if (ele.fileAddress6) {
                arr.push(ele.fileAddress6);
              }
              if (ele.fileAddress7) {
                arr.push(ele.fileAddress7);
              }
              if (ele.fileAddress8) {
                arr.push(ele.fileAddress8);
              }
              if (ele.fileAddress9) {
                arr.push(ele.fileAddress9);
              }
              ele["fileList"] = arr;
            });
            this.porumsList = res.rows
            this.total = res.total;

          }
        });
      } else {
        console.log(this.pueryForm, 'form')
        setForumsList(this.pueryForm).then((res) => {
          console.log(res);
          if (res.code === 200) {
            res.rows.map((ele) => {
              let arr = [];
              if (ele.fileAddress1) {
                arr.push(ele.fileAddress1);
              }
              if (ele.fileAddress2) {
                arr.push(ele.fileAddress2);
              }
              if (ele.fileAddress3) {
                arr.push(ele.fileAddress3);
              }
              if (ele.fileAddress4) {
                arr.push(ele.fileAddress4);
              }
              if (ele.fileAddress5) {
                arr.push(ele.fileAddress5);
              }
              if (ele.fileAddress6) {
                arr.push(ele.fileAddress6);
              }
              if (ele.fileAddress7) {
                arr.push(ele.fileAddress7);
              }
              if (ele.fileAddress8) {
                arr.push(ele.fileAddress8);
              }
              if (ele.fileAddress9) {
                arr.push(ele.fileAddress9);
              }
              ele["fileList"] = arr;
              ele['obj'] = {dialogVisible: false, ids: ele.forumId}
            });
            this.porumsList.push(...res.rows);
            this.total = res.total;
            this.jieliu = true

          }
        });
      }
    },
    //获取点赞过的论坛列表
    getUpvoteList() {
      getHomePageMyUpVoteComment({userId: this.userId}).then(res => {
        if (res.code === 200) {
          res.rows.map((ele) => {
            let arr = [];
            if (ele.fileAddress1) {
              arr.push(ele.fileAddress1);
            }
            if (ele.fileAddress2) {
              arr.push(ele.fileAddress2);
            }
            if (ele.fileAddress3) {
              arr.push(ele.fileAddress3);
            }
            if (ele.fileAddress4) {
              arr.push(ele.fileAddress4);
            }
            if (ele.fileAddress5) {
              arr.push(ele.fileAddress5);
            }
            if (ele.fileAddress6) {
              arr.push(ele.fileAddress6);
            }
            if (ele.fileAddress7) {
              arr.push(ele.fileAddress7);
            }
            if (ele.fileAddress8) {
              arr.push(ele.fileAddress8);
            }
            if (ele.fileAddress9) {
              arr.push(ele.fileAddress9);
            }
            ele["fileList"] = arr;
            ele['obj'] = {dialogVisible: false, ids: ele.forumId}
          });
          this.porumsList.push(...res.rows);
          this.total = res.total;
          this.jieliu = true

        }
      })
    },

    //点赞
    upvote(item, type) {
      let obj = {
        forumId: item.forumId,
        userId: this.userId,
      };
      console.log(obj);
      if (type === "add") {
        addLike(obj).then((res) => {
          if (res.code === 200) {
            item.isUpvote = true;
            item.upvoteCount++;
            item.upvoteId = res.data.upvoteId;
          }
        });
      }
      if (type === "delete") {
        deletaLike(item.upvoteId).then((res) => {
          if (res.code === 200) {
            item.isUpvote = false;
            item.upvoteCount--;
          }
        });
      }
    },
    //评论
    commentBtn(item) {
      item.obj = {dialogVisible: true, ids: item.forumId};
    },
    //去除中括号
    setArray(item) {
      return item.replace(/\[|\]/g, '');
    },
    //去个人主页
    goPersonalHomePage(item) {
      console.log(item, this.userId, 'userid')
      this.$router.push({
        path: "/personalHomepage/personalHomepage",
        query: {
          userId: item,
          type: this.userId == item ? 0 : 1
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.innerBox {
  width: 100%;
  /* min-width: 640px; */
  height: 100%;
  /* padding: 0 500px; */
  overflow: auto;

  .scollBox {
    height: 100%;
    margin: 0 auto;
  }

  .itemBox {
    /* min-height: 300px; */
    min-height: min-content;
    background-color: white;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 15px;

    > .top {
      height: 80px;
      /* background-color: red; */
      display: flex;

      > .left {
        display: flex;

        > div:nth-of-type(1) {
          width: 50px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;

          > span {
            width: 3.25rem;
            height: 3.25rem;
          }
        }

        > div:nth-of-type(2) {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          //padding: 20px 0;
          height: 40px;
          margin-top: 15px;
          margin-left: 10px;

          > div:nth-of-type(1) {
            font-size: 14px;
            font-weight: bold;
          }

          > div:nth-of-type(2) {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .centent {
      display: flex;

      > .innerCentent {
        margin-left: 60px;
        /* background-color: red; */
        flex: 1;

        .cententImg {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-top: 10px;

          > .el-image {
            margin-bottom: 10px;
            width: 133px;
            height: 133px;
            margin-left: 8px;
          }
        }

        > .btn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          margin-top: 10px;

          > div {
            width: 60px;
            display: flex;
            align-items: center;
          }

          img {
            height: 20px;
            width: 20px;
            cursor: pointer;
            margin-right: 5px;
          }
        }
      }
    }
  }
}


.loadMore {
  text-align: center;
  line-height: 30px;
  padding-bottom: 15px;
}
</style>
